import React, { Component } from 'react'
import { Icon, Button, Table, Switch, Form, Input, Modal, Row, Col } from 'antd'

const FormItem = Form.Item;

class AddMessage extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this)
    this.state = {
      visible: false,
      loading: false,
    }
    this.handleOk = this.handleOk.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
      // console.log(this.props)
  }
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }
      console.log(values)
      this.props.handAdd(values.name,values.message);

    });
  }
  handleOk() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  }
  handleCancel() {
    this.setState({ visible: false });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <div className="addInput">
        <Form  onSubmit={this.handleSubmit}>
        <Row gutter={16}>
            <Col className="gutter-row" span={4}>
             <FormItem  {...formItemLayout} label='昵称' >
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入留言者姓名' }],
                  })(
                    <Input  placeholder="请输入留言者姓名"  rows={4} />
                  )}
                </FormItem>
            </Col>
            <Col className="gutter-row" span={10}>
                
                <FormItem   {...formItemLayout} label='内容'>
                  {getFieldDecorator('message', {
                    rules: [{ required: true, message: '请输入留言' }],
                  })(
                    <Input  placeholder="请输入留言内容" />
                  )}
                </FormItem>
            </Col>
            <Col className="gutter-row" span={6}>
                <FormItem  >
                  <Button type="primary" htmlType="submit" > 添加</Button>
                </FormItem>
            </Col>
           
          </Row>
        
        
       
        </Form>

      </div>

    );
  }
}


AddMessage = Form.create()(AddMessage)
export default AddMessage
